<template>

  <div class="table-page-search-wrapper ccslh">
    <a-card :bordered="false" class="card-area">
      <a-form layout="vertical">
        <a-row :gutter="48">
          <template v-if="advanced">
            <a-col :md="6" :sm="12">
              <a-form-item label="招生年度">
                <a-select  :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.zsnd" @change="zsndChange">
                   <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="推免类型">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.tmlx" @change="tmlxChange">
                  <a-select-option v-for="i in selectMenu.tmslx" :key="i" :value="i">{{ i }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="报考院系">
                <a-select :allowClear="true" v-if="!userInfo.departmentId" :disabled="selectMenu.yx.length === 1 || selectMenu.yx.length === 0" showSearch optionFilterProp="children" v-model="queryParam.zsyx" @change="yxChange">
                  <a-select-option v-for="i in selectMenu.yx" :key="i.zsyxm" :value="i.zsyxm">{{ i.zsyxm +"-"+ i.zsyxmc }}</a-select-option>
                </a-select>
                <a-select :disabled="true" v-if="userInfo.departmentId" :default-value="userInfo.name">
                  <a-select-option :key="userInfo.name" :value="userInfo.name">{{ userInfo.name +"-"+ userInfo.nickname }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="报考专业">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.zszy">
                  <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zszym">{{ i.zszym+"-"+i.zszymc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            
            <a-col :md="6" :sm="12">
              <a-form-item label="报考导师">
                <a-input v-model="queryParam.zsds" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="姓名">
                <a-input v-model="queryParam.xm" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.yddh" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="是否反馈">
                <a-select v-model="queryParam.sffk">
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="10" :sm="20">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button type="primary" @click="showBatchFeekback()">批量反馈</a-button>
              <a-button type="primary" @click="exportExcel">导出查询结果</a-button>
              <a-button style="margin-left: 8px"
                        @click="() => queryParam = {ssyxm: selectMenu.yx.length === 1 ? queryParam.ssyxm : ''}">重置</a-button>
              <a @click="advanced = !advanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <div class="table-page-search-result">
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        class="pratice-result_table"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowSelection="options.rowSelection"
        :pagination="{ pageSize: 10 }"
        :scroll="{ x: 1600 }"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="operation" slot-scope="text, record, index">
          <a @click="showFeedback(record)">报名反馈</a>
        </template>
      </s-table>
    </div>
    <feedback-modal
      ref="feedbackModal"
      :visible="visible"
      @refresh="$refs.table.refresh(false)"
      @cancel="visible = false"
    />
    <batch-feedback-modal
      ref="batchFeedbackModal"
      :visible="batchVisible"
      @refresh="$refs.table.refresh(false)"
      @cancel="batchVisible = false"
    />

  </div>
</template>

<script>
  // import moment from 'moment'
  import {STable} from '~'
  import {mapState} from 'vuex'
  import feedbackModal from './components/feedbackModal'
  import batchFeedbackModal from './components/batchFeedbackModal'
  import db from 'utils/localstorage'

  const selectArr = ['TYPE0126']
  export default {
    name: 'TableList',
    components: {
      STable, feedbackModal, batchFeedbackModal
    },
    data() {
      return {
        // 高级搜索 展开/关闭
        advanced: true,
        // 查询参数
        queryParam: {
          xslxm: '',
          zsnd:'',
          tmlx:''
        },
        postParams: {},
        // 表头
        columns: [
          {
            title: '招生年度',
            dataIndex: 'zsnd',
            width: 120,
            fixed: 'left'
          },
          {
            title: '推免类型',
            dataIndex: 'tmlx'
          },
          {
            title: '报考院系',
            dataIndex: 'zsyx'
          },
          {
            title: '报考专业',
            dataIndex: 'zszy'
          },
          {
            title: '报考导师',
            dataIndex: 'zsds'
          },
          {
            title: '姓名',
            dataIndex: 'xm'
          },
          {
            title: '性别',
            dataIndex: 'xb',
            width: '80px'
          },
          // {
          //   title: '证件号码',
          //   dataIndex: 'sfzh',
          //   width: '220px'
          // },
          {
            title: '移动电话',
            dataIndex: 'yddh'
          },
          {
            title: '备用手机',
            dataIndex: 'bysj'
          },
          {
            title: "反馈确认信息",
            dataIndex: 'yxlxksfkxx',
            width: '220px'
          },
          {
            title: '操作',
            dataIndex: 'id',
            width: '120px',
            scopedSlots: {customRender: 'operation'},
            fixed: 'right'
          }
        ],
        loadFirst: true,
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // if(this.loadFirst){
          //   this.loadFirst = false;
          //   return false;
          // }else{
            parameter.pageNum = parameter.pageNo
            let params = Object.assign(this.queryParam, parameter)
            return this.$api.student.tmybmxxList(params).then(res => {
              return {
                data: res.data.rows,
                pageNo: parameter.pageNo,
                pageSize: parameter.pageSize,
                totalPage: Math.ceil(res.data.total / parameter.pageSize),
                totalCount: res.data.total
              }
            })
          // }
          
        },
        selectedRowKeys: [],
        selectedRows: [],

        options: {
          alert: {
            show: true, clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        optionAlertShow: true, // 是否显示alert，已选中
        visible: false,
        batchVisible: false,
        confirmLoading: false,
        editId: null,
        selectMenu: {
          yx: [], // 院系
          zy: [], // 所属专业
          tmslx: []
        },
        uploading: false,
        fileList: [],
        userInfo:'',
      }
    },
    computed: {
      ...mapState({
        systemInfo: state => state.app.systemInfo,
        TYPE0126: state => state.app['TYPE0126'] // 学年
      })
    },
    created() {
      selectArr.forEach(v => {
        this.$store.dispatch('app/setDictionary', v)
      })
      let params = {}
      this.$api.student.ntsGetYear(params).then(res => {
        // this.form.setFieldsValue({zsnd: res.data})
        this.queryParam.zsnd = res.data //默认选中年度
      })
        
      this.userInfo = db.get('USER')
      this.initSelectMenu()
    },
    methods: {
      initSelectMenu() {
        let allRequest = [
          // this.$api.base.schoolRollYxList(),
          this.$api.base.getSchoolYear(),
          this.$api.base.schoolRollBasic()
        ]
        Promise.all(allRequest).then(res => {
          // this.queryParam.zsnd = res[0].data.masterAdmissionYear //默认选中年度
          let tmslx = []
          if(res[1].data){
            for (var key in res[1].data) {
                tmslx.push(key)
            }
          }
          this.selectMenu = {
            tmslx: tmslx
          }
          this.queryParam.tmlx = tmslx[1]
          this.zsndChange(res[0].data.masterAdmissionYear)
          this.$refs.table.refresh(true)
      })
        this.$nextTick(() => {
          this.queryParam.xslxm = '01'
        })
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      showBatchFeekback() {
        if (this.selectedRows.length == 0) {
          this.$message.warning('请选择报名信息！')
          return;
        }
        const ids = this.selectedRows.map(item => item.id);
        this.batchVisible = true;
        this.$refs.batchFeedbackModal.ids = ids.join(',');
      },
      yxChange(code) {
        this.$set(this.selectMenu, 'zy', [])
        this.$set(this.queryParam, 'zszy', '')
        if(code){
          this.$api.base.schoolRollZyList({
            zsyx: code,
            zsnd:this.queryParam.zsnd,
            tmlx:this.queryParam.tmlx
          }).then(res => {
            this.$set(this.selectMenu, 'zy', res.data)
          })
        }
      },
      zsndChange(code){
        this.$set(this.selectMenu, 'yx', [])
        this.queryParam.zsyx = ''
        this.$api.base.schoolRollYxList({
          zsnd:code,
          tmlx:this.queryParam.tmlx
        }).then(res => {
          if(res.data && res.data[0]){
            this.selectMenu.yx = res.data
            this.queryParam.zsyx = res.data[0].zsyxm
            this.yxChange(res.data[0].zsyxm)
            this.$refs.table.refresh(true)
          }
        })
      },
      tmlxChange(code){
        this.$set(this.selectMenu, 'yx', [])
        this.queryParam.zsyx = ''
        this.$api.base.schoolRollYxList({
          zsnd:this.queryParam.zsnd,
          tmlx:code
        }).then(res => {
          if(res.data && res.data[0]){
            this.selectMenu.yx = res.data
            this.queryParam.zsyx = res.data[0].zsyxm
            this.yxChange(res.data[0].zsyxm)
          }
        })
      },
      showFeedback(record) {
        this.visible = true
        this.$refs.feedbackModal.defendedInfo = record;
      },
      exportExcel(data) {
        this.$export('schoolRoll/tmybmxx/expExcelTpl', this.queryParam)
      },
    }
  }
</script>
<style lang="less">
.ccslh{
  .pratice-result_table{
    table {
      table-layout:fixed;
    }
    tr td:nth-child(11),td:nth-child(12){
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

</style>
